<template>
  <div class="special" @click="specialDetail">
    <div class="pic"><img v-lazy="{src:item.preheat_img_single, loading:lazyPic}" alt=""></div>
    <div class="info-box">
      <span class="title">{{ item.title }}</span>
      <span class="date" v-if='item.timeStr'>{{ item.timeStr}}</span>
    </div>
  </div>
</template>

<script>
  export default {
    props:['parentData'],
    data(){ 
      return{
        item:{},
        lazyPic:require('../../assets/img/publicImg/loading.png') 
      } 
    },
    created(){this.item=this.parentData; },
    methods:{
      specialDetail(){
        this.$emit('childEvent',this.item.special_id);
      }
    }
  }
</script>

<style lang="less" scoped>
.special { position: relative; }
.info-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 0.6rem;
  padding: 0 0.3rem;
  line-height: 0.6rem;
  color: #666;
  font-size: 0.28rem;
  position: absolute;
  bottom: 0;
  left: 0;
  background: #fff;
  box-sizing: border-box;
  .title {
    width: 55%;
    height: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .date {
    width: 30%;
    height: 100%;
    text-align: right;
  }
}

</style>